<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css23-伪类选择器</title>

    <style>
        a {
            color: #333;
            text-decoration: none;
        }

        a:link {
            color: #333;
            text-decoration: none;
        }

        a:visited {
            color: orange;
        }

        a:hover {
            color: seagreen;
        }

        a:active {
            color: seashell;
        }

        /* 把获取光标的input表单选取出来 */
        input:focus {
            background-color: pink;
        }
    </style>

</head>
<body>
    
    <h3>伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素</h3>
    <h4>伪类选择器书写最大的特点是用冒号(:)表示，比如:hover、:first-child</h4>
    <br>
    1.为了确保生效，请按照LVHA的顺序声明:link -> :visited -> :hover -> :active <br>
    2.因为a链接在浏览器中具有默认样式，所以开发中要给链接单独指定样式 <br>

    <br><br><br>
    <div>
        <table width=500 border="1" cellspacing=0 align="content" class="pseudo">
            <tr>
                <td colspan="2">链接伪类选择器:</td>
            </tr>
            <tr>
                <th>a:link</th>
                <th>选择所有未被访问的链接</th>
            </tr>
            <tr>
                <th>a:visited</th>
                <th>选择所有已被访问的链接</th>
            </tr>
            <tr>
                <th>a:hover</th>
                <th>选择鼠标指针位于其上的链接</th>
            </tr>
            <tr>
                <th>a:active</th>
                <th>选择活动链接（鼠标按下未松开的链接）</th>
            </tr>
            <tr>
                <th>例如：</th>
                <th><a href="#">链接伪类选择器</a></th>
            </tr>
        </table>
    </div>

    <br><br><br>
    <h3>:focus 伪类选择器用于选取获得焦点的表单元素</h3>
    <h4>焦点就是光标，一般情况input类表单元素才能获取，因此这选择器也主要针对表单元素</h4>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>